<template>
  <div id="image-body" class="image-body-card" v-loading="loading">
     <!-- 提示框 -->
    <alert @getImageList="getImageList" ref="alert" :imageId="imageId"></alert>
    <batch @getImageList='getImageList' ref="batch" ></batch>
    <upload @getImageList='getImageList' ref="upload"></upload>

    <H2 class="title">图片列表</H2>
    <!-- 点击上传按钮 -->

    <!-- 按钮太多应该统一管理，但是算了，不想弄了，烦点就烦点吧 -->
    <!-- 太烦了，找组件吧，反人类 -->
    <el-button v-show="!checkBoxshow&&!searchShow" @click='openLoading()' type="primary" style="margin-left:20px" icon="el-icon-plus">添加</el-button>
    
    <el-button v-show="!checkBoxshow"   @click='searchShowevent()' style="margin-left:20px" type="primary" icon="el-icon-search">搜索</el-button>
    <el-input v-show="searchShow" style="margin-left:20px" class="searhinput"  type="text"  placeholder="请输入新的名称" v-model='searchText'></el-input>
    <el-button v-show="searchShow" @click="dosearch()" style="margin-left:20px" type="primary" >确定</el-button>
    <el-button v-show="searchShow" @click='resetSearch()' style="margin-left:20px" type="danger" >重置</el-button>
    <el-button v-show="searchShow" @click='cancelSearch()' style="margin-left:20px"  >取消</el-button>

    <el-button  v-show="!searchShow" icon="el-icon-s-unfold" type="primary" style="margin-left:20px" @click="checkBoxshow=true">批量管理</el-button>
    <!-- sellectAll -->
    <el-button  v-show="checkBoxshow"  type="primary" style="margin-left:20px" @click="sellectAll()">
            <svg-icon  icon-class="sellectAll"  class-name='custom-class' />
      全选</el-button>
    <el-button v-show="checkBoxshow"  type="primary" style="margin-left:20px" @click=" converselySelect()">反选</el-button>
    <el-button v-show="checkBoxshow" icon="el-icon-delete" type="danger" style="margin-left:20px" @click="openBatch()">删除全部已选</el-button>
    <el-button v-show="checkBoxshow" style="margin-left:20px" @click="cancelBatch">取消</el-button>

   

    <div class="card image-item">
      <el-row :gutter="10">
        <el-col :span="4" v-for="(item,index) in imageList" :key="item.id">
          <el-card  :style='{cursor:checkBoxshow?"pointer":""}'  class="card-card" shadow="hover" v-loading="index===tempIndex">
            <!-- 批量管理的checkBox -->
            <el-checkbox  :style='{background:item.ischecked?"#409EFF":""}' v-show="checkBoxshow"  border size="mini" v-model='item.ischecked' class="image-checkbox"></el-checkbox>
            <div @click="imagePick(item)">
              <img class="image" :src="`${host}/${item.dir}/${item.fileName}`" alt />
            </div>

            <div class="footter">
              <div class="footter-input">
                <div>
                <span>名称：</span>
                </div>
                <span class="name" v-show="!item.isshow">{{Boolean(item.title)? item.title : '未命名'}}</span>
                <el-input
                  v-model="item.title"
                  :ref="item.id"
                  size="mini"
                  v-show="item.isshow"
                  type="text"
                  placeholder="请输入新的名称"
                ></el-input>
              </div>
              <div class="footter-button" v-show="!checkBoxshow&&!searchShow">
                <div class="common-button" v-show="item.isshow">
                  <el-button
                    class="left-button"
                    type="primary"
                    size="mini"
                    @click="imageUpDate(item,index)"
                  >确定</el-button>
                  <el-button
                    class="right-button"
                    type="danger"
                    size="mini"
                    @click="cancelUpdate(item)"
                  >取消</el-button>
                </div>

                <div class="update-button" v-show="!item.isshow">
                  <el-button
                    class="left-button"
                    type="primary"
                    size="mini"
                    @click="showInput(item, index)"
                  >编辑</el-button>
                  <el-button
                    class="right-button"
                    type="danger"
                    size="mini"
                    @click="openDialog(item.id)"
                  >删除</el-button>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.currentPage"
      :page-sizes="[12, 24, 36, 48]"
      :page-size="pager.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
    ></el-pagination>

   
    
  </div>
</template>

<script>
import batch from "@/views/Manager/materialManager/batch.vue";
import alert from "@/views/Manager/materialManager/alert.vue";
import upload from "@/views/Manager/materialManager/upload.vue"

import material from "@/api/materialManager/material";
import setting from "@/settings";

export default {
  components: {
    alert,
    batch,
    upload
  },
  data() {
    return {
      // 主域名
      host: setting.host,
      // 分页器
      pager: {
        start: 1,
        limit: 12,
        total: 100,
        currentPage: 1
      },
      // 图片列表
      imageList: [],
      //警告框注入的值
      imageId: "",
      //加载进度条
      loading: false,
      //控制每个图片的loading的显示和隐藏
      // 修改姓名完成后，图片上显示一个loading动画，直到更新完成
      tempIndex: "",
      // 这个值控制所有的图片上的checkbox的显示和隐藏
      // 以及其他一些样式的变更，都与它有关
      checkBoxshow:false,
      // 搜索框的显示和隐藏
      // 以及其他一些样式的变更，都与它有关
      searchShow:false,
      // 批量删除的窗口的显示隐藏
      centerDialogVisible: false,
      // 搜索的文字条件
      searchText:''
    };
  },
  computed:{
    // 批量删除的数组
      tempDataList(){
        var temp=this.imageList
        var tempData=[]
        for(var i in temp){
          if(temp[i].ischecked==true){
            tempData.unshift(temp[i])
          }
        }
        return tempData
      }
  },
  methods: {
    // 删除方法
    dosearch(){
      this.getImageList("edit")
    },
    resetSearch(){
      this.searchText=''
    },
    cancelSearch(){
      this.searchShow=false
      this.searchText=''
    },
    searchShowevent(){
      this.searchShow=true
    },
    // 批量处理图片时的全选方法和反选
    sellectAll(){
      var temp=this.imageList
      for(var i in temp){
        temp[i].ischecked=true
      }
      this.imageList=this.imageList.slice()
    },
    // 反选
    converselySelect(){
      var temp=this.imageList
        for(var i in temp){
        temp[i].ischecked=!temp[i].ischecked
      }
      this.imageList=this.imageList.slice()
    },
     // 打开添加图片的弹窗
    openLoading(){
      this.$refs.upload.centerDialogVisible=true
    },
    // 打开批量删除的窗口
    openBatch(){
      if(this.tempDataList.length==0){
        this.$message({
          showClose: true,
          message: '您还没有选择任何图片，请选择您好选择的图片',
          type: 'error'
        });
        return
      }
      this.$refs.batch.dataList=this.tempDataList
      this.$refs.batch.centerDialogVisible=true
    },
    // 取消批量功能
    cancelBatch(){
      console.log(this.imageList)
      this.checkBoxshow=false
      var temp=this.imageList
      for(var i in temp){
         temp[i].ischecked=false
      }
      this.imageList=this.imageList.slice()
    },
    // 点击单个card选中或取消选择
    imagePick(item){
      // 本来这个tem.ischecked是不存在的，也就是说，本来的数据里不存在它的set和get方法
      // 当用v-model让他‘空降’之后，需要给它一个set和get方法才可以去渲染页面，否则单个变了之后并不会渲染页面
      // 而修改渲染的数据源可以让其内部的所有单个属性重新设定set和get方法
      // 所以就有了this.imageList=this.imageList.slice()这么个东西

      // 当然也可以在数据源头上，杜绝v-model绑定空属性的方式去杜绝这种的现象的发生
      item.ischecked=!item.ischecked
      // 修改了某个值之后要让渲染的数据源发生改变才可以
      // 让初始化，让本来没有的数据，在有之后，设定上set和get方法
      this.imageList=this.imageList.slice()
    },
    // 打开提示框
    openDialog(id) {
      this.$refs.alert.centerDialogVisible = true;
      this.imageId = id;
    },
    // 拿图片信息
    getImageList(flag) {
 
      if(flag!="edit"){
        this.searchShow=false
      }

      this.checkBoxshow=false
      this.loading = true;
  
      material
        .imageList({
          start: this.pager.start,
          limit: this.pager.limit,
          title:this.searchText
        })
        .then(res => {
          var temp=res.data.data.list;
          // 让v-model双向绑定的数据不为空数据
          // temp.map((item)=>{
          //     return item.ischecked=false
          // })
          this.imageList = temp
          
          console.log( this.imageList)
          this.pager.total = res.data.data.totalRow;
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
          this.$message({
            message: `网络有误，请刷新稍后重试，或者试着甩锅给后台`,
            type: "warning"
          });
        });
    },
    // 更新图片名称的方法
    // 输入框失焦时发生改变
    imageUpDate(item, index) {
      // 如果输入框的内容为空，则返回
      if (!item.title) {
        this.$message({
          message: `请输入内容`,
          type: "warning"
        });
        return;
      }
      this.tempIndex = index;
      material
        .imageUpdate({
          id: item.id,
          title: item.title
        })
        .then(res => {
          // 修改成功后，重新获取列表
          // 警告提示
          this.$message({
            message: `更新成功`,
            type: "success"
          });
          // 将输入框内容改为空
          this.tempTitle = "";
          // 关闭loading动画
          this.tempIndex = "";
          //每个图片的输入框的显示和隐藏
          item.isshow = false;
          //返回新数组，触发渲染
           setTimeout(()=>{
               this.getImageList();
               this.imageList = this.imageList.slice();
          },500)
          
        });
    },

    // 变更输入框的显示和隐藏
    // 修改姓名的方法之一
    //给input输入框绑定refs后，通过ref找这个节点
    showInput(item, index) {
      item.isshow = true;
      this.imageList = this.imageList.slice();
      // 输入框聚焦
      setTimeout(() => {
        this.$refs[item.id][0].focus();
      });
    },
    // 什么都不做然后关闭input输入框
    cancelUpdate(item) {
      (item.isshow = false), (this.imageList = this.imageList.slice());
    },
    //分页器方法
    // 将限制limit改为当前选择的值val
    handleSizeChange(val) {
      this.pager.limit = val;
      this.pager.start = 1;
      this.pager.currentPage = 1;
      this.getImageList();
    },
    handleCurrentChange(val) {
      this.pager.start = val;
      this.getImageList();
    }
  },
  created() {
    this.getImageList();
  }
};
</script>

<style lang="scss" scoped>
// 样式表
.searhinput{
  width: 20%;
}
.title {
  text-align: center;
}
.image-body-card {
  overflow: hidden;
  img {
    width: 140px;
    height: 140px;
  }
}
.el-pagination {
  float: right;
}
.card {
  min-width: 100%;
  overflow: hidden;
  .el-col {
    margin: 5px 0;
    overflow: hidden;
  }
  .card-card {
    overflow: hidden;
    position: relative;
    .image-checkbox{
      position: absolute;
      right: 0px;
      top: 0px;
      ::v-deep .el-checkbox__input{
        display: none;
      }
    }
  }
  .image {
    margin: 0 auto;
    display: block;
  }
  .footter {
    overflow: hidden;
    width: 100%;
    margin-top: 30px;
    .footter-input {
      height: 50px;
      width: 100%;
      font-size: 16px;
      display: block;

      .el-input {
        width: 100%;
    
      }
    }
    .name {
      display: inline-block;
    }
    .el-button {
      margin-top: 10px;
    }
    .left-button {
      float: left;
    }
    .right-button {
      float: right;
    }
  }
  margin: 10px;
  float: right;
}
</style>